<script setup lang="ts">
import Request from '@/api/axios'
import { ref, onMounted, reactive, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'

// 获取用户ID
const route = useRoute()
const user_id = route.query.uid
import type { User } from './type'
const userInfo = reactive<User>({
    id: '',
    email: '',
    rating: 0,
    submission: 0,
    username: '',
    accept: 0,
    birthday: '',
    avatar: '',
    nickname: '',
    solved: 0,
    codeforces: '',
    accuracy: 0,
    rank: 1
})
const accuracyCompute = (accept: number, submission: number) => {
    if (submission === 0) return 0;
    else return (accept / submission) * 100;
}
// 用户基础信息
onMounted(async () => {
    await Request.get({ url: `/user/${user_id}` }).then(res => {
        userInfo.id = res.info.id
        userInfo.email = res.info.email
        userInfo.rating = res.info.rating
        userInfo.submission = res.info.submission
        userInfo.accept = res.info.accept
        userInfo.username = res.info.username
        userInfo.nickname = res.info.nickname
        userInfo.avatar = res.info.avatar || 'https://avatars.githubusercontent.com/u/1?v=4'
        userInfo.birthday = res.info.birthday
        userInfo.codeforces = res.info.codeforces
        userInfo.accuracy = accuracyCompute(userInfo.accept, userInfo.submission)
    })
    nextTick(() => {
        if (pieChartRef.value) {
            pieChart = echarts.init(pieChartRef.value)
            pieChart.setOption({
                title: {
                    // text: '解题类型分布',
                    left: 'center',
                    top: 0,
                    textStyle: { fontSize: 18 }
                },
                tooltip: { trigger: 'item' },
                //   legend: { bottom: 0, left: 'center' },
                series: [
                    {
                        name: '题型',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
                        label: { show: true, position: 'outside' },
                        emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
                        labelLine: { show: true },
                        data: solveTypeData.value
                    }
                ]
            })
        }
    })
})


const activityData = ref([
    [1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1,],
    [0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1,],
    [1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1,],
    [0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1,]
])

const hotBlogs = ref([
    { title: '算法刷题心得', link: '/blog/1' },
    { title: '比赛经验总结', link: '/blog/2' }
])

const contestHistory = ref([
    { name: '春季校赛', rank: 5, ratingChange: +50 },
    { name: '暑期挑战赛', rank: 12, ratingChange: -20 }
])

const solveTypeData = ref([
    { value: 12, name: '动态规划' },
    { value: 8, name: '贪心' },
    { value: 6, name: '二分' },
    { value: 5, name: '图论' },
    { value: 4, name: '数据结构' },
    { value: 3, name: '数学' }
])

const pieChartRef = ref<HTMLDivElement>()
let pieChart: echarts.ECharts | null = null

</script>

<template>
    <div class="profile-container">
        <!-- 用户信息 -->
        <div class="profile-header">
            <img :src="userInfo.avatar" class="avatar" />
            <div class="info">
                <h2>{{ userInfo.username }}</h2>
                <div class="rating">Rating: <span :class="userInfo.rating >= 2000 ? 'high' : ''">{{ userInfo.rating
                }}</span></div>
                <div class="rank">全站排名：{{ userInfo.rank }}</div>
            </div>
        </div>

        <!-- 数据统计 -->
        <div class="profile-stats">
            <div>
                <div class="stat-num">{{ userInfo.solved }}</div>
                <div class="stat-label">做题数</div>
            </div>
            <div>
                <div class="stat-num">{{ userInfo.submission }}</div>
                <div class="stat-label">提交数</div>
            </div>
            <div>
                <div class="stat-num">{{ userInfo.accuracy }}%</div>
                <div class="stat-label">正确率</div>
            </div>
        </div>

        <!-- 活跃度图 -->
        <div class="activity-section">
            <h3>活跃度</h3>
            <div class="activity-graph">
                <div v-for="(row, i) in activityData" :key="i" class="activity-row">
                    <div v-for="(cell, j) in row" :key="j" class="activity-cell" :class="{ active: cell }"></div>
                </div>
            </div>
        </div>

        <!-- 热门博客 -->
        <div class="blogs-section">
            <h3>热门博客</h3>
            <ul>
                <li v-for="blog in hotBlogs" :key="blog.link">
                    <a :href="blog.link">{{ blog.title }}</a>
                </li>
            </ul>
        </div>

        <!-- 比赛历史 -->
        <div class="contest-section">
            <h3>比赛历史</h3>
            <table>
                <thead>
                    <tr>
                        <th>比赛名称</th>
                        <th>排名</th>
                        <th>Rating变化</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="c in contestHistory" :key="c.name">
                        <td>{{ c.name }}</td>
                        <td>{{ c.rank }}</td>
                        <td :class="c.ratingChange >= 0 ? 'up' : 'down'">
                            {{ c.ratingChange > 0 ? '+' : '' }}{{ c.ratingChange }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 解题类型分析饼图 -->
        <div class="pie-section">
            <div ref="pieChartRef" class="pie-chart"></div>
        </div>

        <!-- 你可以根据用户信息添加更多展示 -->
        <div class="user-extra-info">
            <div>邮箱：{{ userInfo.email }}</div>
            <div>生日：{{ userInfo.birthday }}</div>
            <div v-if="userInfo.codeforces">Codeforces: <a
                    :href="`https://codeforces.com/profile/${userInfo.codeforces}`" target="_blank">{{
                        userInfo.codeforces }}</a></div>
        </div>
    </div>
</template>

<style scoped>
.profile-container {
    max-width: 80%;
    margin: 32px auto;
    background: #fff;
    padding: 32px 24px;
}

.profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-right: 32px;
    border: 3px solid #e3e3e3;
    object-fit: cover;
}

.info h2 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 700;
}

.rating {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.rating .high {
    color: #f39c12;
    font-weight: bold;
}

.rank {
    color: #888;
    font-size: 1rem;
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 32px;
}

.stat-num {
    font-size: 2rem;
    font-weight: 600;
    color: #2d6cdf;
    text-align: center;
}

.stat-label {
    text-align: center;
    color: #888;
    font-size: 1rem;
}

.activity-section {
    margin-bottom: 32px;
}

.activity-graph {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.activity-row {
    display: flex;
    gap: 4px;
}

.activity-cell {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #eaeaea;
    transition: background 0.2s;
}

.activity-cell.active {
    background: #2d6cdf;
}

.blogs-section {
    margin-bottom: 32px;
}

.blogs-section ul {
    padding-left: 18px;
}

.blogs-section a {
    color: #2d6cdf;
    text-decoration: none;
}

.blogs-section a:hover {
    text-decoration: underline;
}

.contest-section table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.contest-section th,
.contest-section td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.contest-section th {
    background: #f7f7f7;
}

.contest-section .up {
    color: #27ae60;
    font-weight: bold;
}

.contest-section .down {
    color: #e74c3c;
    font-weight: bold;
}

.pie-section {
    margin: 32px 0;
    background: #fafbfc;
    border-radius: 12px;
    padding: 24px 0 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.pie-chart {
    width: 360px;
    height: 260px;
    margin: 0 auto;
}

.user-extra-info {
    margin: 24px 0 32px 0;
    color: #555;
    font-size: 1.05rem;
    line-height: 2;
}

.user-extra-info a {
    color: #2d6cdf;
    text-decoration: none;
}

.user-extra-info a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .pie-chart {
        width: 100%;
        min-width: 220px;
        height: 180px;
    }
}
</style>